<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title></title>
    <link rel="stylesheet" href="../../css/framework7.ios.min.css">
    <link rel="stylesheet" href="../../css/framework7.ios.colors.min.css">
    <link rel="stylesheet" href="../../css/framework7-icons.css">
    <link rel="stylesheet" href="css/commadim.css">
</head>
<body>
<div class="statusbar-overlay"></div>
<div class="views">
    <div class="view view-main">
        <div class="navbar">
            <div class="navbar-inner">
                <div class="left sliding"></div>
                <div class="center sliding">社区管理员</div>
                <div class="right sliding"></div>
            </div>
        </div>
        <div class="pages navbar-through toolbar-fixed">
            <div data-page="Questionrank" id="Questionrank" class="page">
                <div class="page-content">
                    <div class="list-block  media-list marginTB-15">
                        <ul class="qranklist"></ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script id="Qranklist" type="text/template">
    {{#if rank}}
    {{#each rank}}
    <a href="#" class="item-link item-content qitem" data-qid="{{qid}}">
        <div class="rankicon {{#if @first}}bg-gold color-white{{/if}}
        {{#js_compare 'this.index==2'}}bg-red color-white{{/js_compare}}
        {{#js_compare 'this.index==3'}}bg-qlan color-white{{/js_compare}}
        {{#js_compare 'this.index>3'}}color-gray{{/js_compare}}">{{index}}</div>
        <div class="item-media"><img src="{{userIcon}}" class="icon30"></div>
        <div class="item-inner">
            <div class="item-title-row">
                <div class="item-title">{{question}}</div>
            </div>
            <div class="item-subtitle color-gray">{{userName}}</div>
        </div>
    </a>
    {{/each}}
    {{else}}
    <style>.list-block ul:before,.list-block ul:after{height: 0}</style>
    <div class="flex-column flex-justify-center flex-align-center flex-nowrap color-bg">
        <img src="img/too-sad.png" style="width: 100px;">
        <span class="color-gray size-15 marginTB-15">问题上榜，女神来答哦~~</span>
    </div>
    {{/if}}
</script>
<script id="Qdetail" type="text/template">
    <div class="card no-margin">
        <div class="card-content">
            <div class="card-content-inner">
                <p class="bold">{{question}}</p>
                <div class="size-12 color-gray toggle-text">{{description}}</div>
                <div class="toggle-text-icon"><i class="f7-icons color-gray size-18">chevron_down</i></div>
                <div class="flex-row flex-nowrap flex-align-center flex-justify-between">
                    <div class="color-qing">
                        {{#js_compare "this.views!=0"}}{{views}}人阅读&nbsp;&nbsp;{{/js_compare}}
                        {{#js_compare "this.follows!=0"}}{{follows}}人关注&nbsp;&nbsp;{{/js_compare}}
                        {{#js_compare "this.answers!=0"}}{{answers}}个回答{{/js_compare}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</script>
<script id="Recorditem" type="text/template">
    <li class="swipeout recorditem" data-localid="{{localid}}">
        <div class="swipeout-content item-content" style="height: 60px;">
            <div class="item-media"><i class="f7-icons color-gray size-18" style="-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);">social_rss_fill</i></div>
            <div class="item-inner">
                <div class="item-title">{{time}}s</div>
                <div class="item-after"><i class="f7-icons color-green">play_round_fill</i></div>
            </div>
        </div>
        <div class="swipeout-actions-right">
            <a href="#" class="swipeout-delete">删除</a>
        </div>
        <div class="sortable-handler"></div>
    </li>
</script>
<script type="text/javascript" src="../../js/wx.jssdk.min.1.2.0.js"></script>
<script type="text/javascript" src="../../js/framework7.min.js"></script>
<script type="text/javascript">
    var ApiUrl = 'http://api.nldou.com/';
    var GlobalUserid=0;
    var initjssdk_url = ApiUrl+'weixinapi/init_wx_jsapi';
    var GetQuestionQdetail_url = ApiUrl+'commwapquestion/';
    var Qrank_url = ApiUrl+'commwapbeans/getQuestionrank';
    var Downtoserver_url = ApiUrl+'commwapadmin/downloadTempMedia';
    var rankpagesize = 10;
    var edittype = 'record';//回答方式
    
    var isplaying = 0;
    var isrecording = 0;
    var timer;
    var counter = 0;
    var medialist = [];
    var $$ = Dom7;

    $$.ajax({
        url:initjssdk_url,
        method:"GET",
        data: {fromUrl:window.location.href},
        dataType:'json',
        success: function (res) {
            console.log('初始化jssdk',res);
            if(res.code==1){
                //权限申请
                wx.config({
                    debug: false,
                    appId: res.data.appid,
                    timestamp: res.data.timestamp,
                    nonceStr: res.data.nonceStr,
                    signature: res.data.signature,
                    jsApiList: ['startRecord','stopRecord','onVoiceRecordEnd','playVoice','pauseVoice','stopVoice','onVoicePlayEnd','uploadVoice']
                });
            }
        }
    });
    
    var Nldouadmin = new Framework7({
        animateNavBackIcon: true,
        modalTitle:'社区管理员',
        modalButtonOk:'确认',
        modalButtonCancel:'取消',
        template7Pages:true
    });

    var mainView = Nldouadmin.addView('.view-main', {
        dynamicNavbar: true
    });

    Nldouadmin.QranklistTemplate = Template7.compile($$('script#Qranklist').html());
    Nldouadmin.QdetailTemplate = Template7.compile($$('script#Qdetail').html());
    Nldouadmin.RecorditemTemplate = Template7.compile($$('script#Recorditem').html());

    function getQuestionById(qid,url)
    {
        $$.ajax({
            method:'POST',
            url:url,
            data:{qid:qid,uid:GlobalUserid},
            dataType:'json',
            success:function (res) {
                console.log('问题页信息',res);
                if (res.code == 1){
                    var qhtml = Nldouadmin.QdetailTemplate(res.data);
                    $$('#Question .qdetail-header').append(qhtml);
                }
            }
        });
    }
    function getQrank(url,page)
    {
        $$.ajax({
            method:'POST',
            url:url,
            async:false,
            data:{page:page,pagesize:rankpagesize},
            dataType:'json',
            success:function (res) {
                console.log('女神榜列表',res);
                if (res.code == 1){
                    var html = Nldouadmin.QranklistTemplate(res.data);
                    $$('#Questionrank .qranklist').append(html);
                    $$('#Questionrank .infinite-scroll-preloader').remove();
                }
            }
        });
    }
    function addRecordItem(localid) {
        var html = Nldouadmin.RecorditemTemplate({localid:localid,time:counter});
        $$('#Question .recordlist').append(html);
    }

    wx.ready(function () {
        $$(document).on('click','.recordbtn',function () {
            if (!isrecording){
                $$(this).html('录音中');
                isrecording = !0;
                wx.startRecord();
                timer = setInterval(function () {
                    counter++;
                },1000);
            }else{
                $$(this).html('开始录音');
                wx.stopRecord({
                    success: function (res) {
                        clearInterval(timer);
                        addRecordItem(res.localId);
                        counter = 0;
                        isrecording = 0;
                    }
                });
            }
        });
        wx.onVoiceRecordEnd({
            complete: function (res) {
                Nldouadmin.alert('录音超过一分钟','');
                clearInterval(timer);
                addRecordItem(res.localId);
                counter = 0;
                isrecording = 0;
            }
        });
        $$(document).on('click','.recorditem',function () {
            var localid;
            if (!isplaying){
                $$(this).find('.item-after').html('<i class="f7-icons color-green">pause_round_fill</i>');
                isplaying = !0;
                localid = $$(this).data('localid');
                wx.playVoice({
                    localId: localid
                });
            }else{
                $$(this).find('.item-after').html('<i class="f7-icons color-green">play_round_fill</i>');
                isplaying = 0;
                localid = $$(this).data('localid');
                wx.pauseVoice({
                    localId: localid
                });
            }
        });
        wx.onVoicePlayEnd({
            success: function (res) {
                $$('#Question .recorditem').find('.item-after').html('<i class="f7-icons color-green">play_round_fill</i>');
                isplaying = 0;
            }
        });
        function upload(i,l)
        {
            wx.uploadVoice({
                localId: $$('.recorditem').eq(i).data('localid'),
                isShowProgressTips: 1,
                success: function (res) {
                    medialist.push(res.serverId);
                    i++;
                    if (i < l){upload(i,l);}else{
                        console.log(medialist);
                        alert(JSON.stringify(medialist));
                        downloadtoserver(medialist);
                    }
                }
            });
        }
        function downloadtoserver(mediaid)
        {
            $$.ajax({
                method:'POST',
                url:Downtoserver_url,
                data:{mediaid:mediaid},
                dataType:'json',
                success:function (res) {
                    console.log('下载到服务器',res);
                    alert(JSON.stringify(res.data));
                    if (res.code == 1){

                    }
                }
            });
        }
        $$(document).on('click','.uploadbtn',function(){
            var l = $$('.recorditem').length;
            var i = 0;
            upload(i,l);
        });
    });
    wx.error(function (res) {
    });

    $$(document).on('click','.toggle-text-icon',function () {
        if ($$(this).hasClass('active')){
            $$(this).removeClass('active');
            $$(this).find('i').html('chevron_down');
            $$(this).parent().find('.toggle-text').css('max-height','100px');
        }else{
            $$(this).addClass('active');
            $$(this).find('i').html('chevron_up');
            $$(this).parent().find('.toggle-text').css('max-height','10000px');
        }
    });
    $$(document).on('click','.switch',function () {
        switch(edittype){
            case 'record':
                $$(this).find('i').html('radio');
                $$('#Question .recordbtn').hide();
                $$('#Question .editbtn').show();
                edittype = 'edit';
                break;
            case 'edit':
                $$(this).find('i').html('list');
                $$('#Question .editbtn').hide();
                $$('#Question .recordbtn').show();
                edittype = 'record';
                break;
            default:
                return;
        }
    });
    $$(document).on('click','.qitem',function () {
        var qid = $$(this).data('qid');
        mainView.router.load({url:'question.html?qid='+qid});
    });
    Nldouadmin.onPageInit('Questionrank',function (page) {
        getQrank(Qrank_url,1);
    }).trigger();
    Nldouadmin.onPageInit('Question',function(page){
        var qid = page.query.qid;
        $$('#Question').data('id',qid);
        getQuestionById(qid,GetQuestionQdetail_url);
    });
</script>
</body>